<template>
  <el-dialog :model-value="visible" :title="title" width="800" style="overflow: hidden;" :close-on-click-modal="false"
    lock-scroll :show-close="false">
    <el-scrollbar height="400px">
      <div class="zw-cb-group" v-for="item in form" :key="item.group">
        <div class="zw-cb-all">
          <el-checkbox :label="`全选 【${item.group}】`" v-model="item.checkAll" :indeterminate="item.isIndeterminate"
            @change="handleCheckAllChange(item)"></el-checkbox>
        </div>
        <div class="zw-cb-item">
          <el-checkbox-group v-model="item.menuCodes" @change="handleCheckedChange(item)">
            <el-checkbox v-for="api in menuList.filter(z => z.group === item.group)" :key="api.menuCode"
              :label="api.menu" :value="api.menuCode"></el-checkbox>
          </el-checkbox-group>

        </div>
      </div>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="emits('close', false)">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import ApiTree from '@/server/api-tree';
import type { MenuVO } from '@/server/menu/types';
import type { RoleAuthVO } from '@/server/role/types';
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
type DataDTO = { group: string, menuCodes: string[], checkAll: boolean, isIndeterminate: boolean };
const emits = defineEmits(["close"])
const props = withDefaults(defineProps<{ visible: boolean, role: string, roleName: string }>(), {
  role: "",
  roleName: "",
  visible: false
});
/** 表单定义 */
const title = ref<string>("编辑角色菜单权限");
const checkAll = ref(false)
const isIndeterminate = ref(true)
const form = ref<DataDTO[]>([]);
const handleCheckedChange = (item: DataDTO) => {
  item.checkAll = item.menuCodes.length === menuList.value.filter(x => x.group === item.group).length;
  item.isIndeterminate = item.menuCodes.length > 0 && item.menuCodes.length < menuList.value.filter(x => x.group === item.group).length;
}
const handleCheckAllChange = (item: DataDTO) => {
  if (item.checkAll) {
    item.menuCodes = menuList.value.filter(x => x.group === item.group).map(x => x.menuCode);
    item.checkAll = true;
    item.isIndeterminate = false;
  } else {
    item.menuCodes = [];
    item.checkAll = false;
    item.isIndeterminate = false;
  }
}
/** 获取所有菜单 */
const menuList = ref<MenuVO[]>([]);
const getMenuList = async () => {
  const { success, data } = await ApiTree.menu.list();
  if (success) {
    menuList.value = data;
  }
}
/** 获取当前角色的权限 */
const roleAuth = ref<RoleAuthVO>();
const getRoleAuth = async () => {
  const { success, data } = await ApiTree.auth.detail(props.role);
  if (success) {
    roleAuth.value = data;
    checkAll.value = form.value.length === menuList.value.length
    isIndeterminate.value = form.value.length > 0 && form.value.length < menuList.value.length

    const groups = [...new Set(menuList.value.map(item => item.group))];
    form.value = groups.map(g => {
      const menuCodes = data.authMenu.filter(api => api.group === g).map(x => x.menuCode);
      const allMenus = menuList.value.filter(api => api.group === g);
      return {
        group: g,
        menuCodes: menuCodes,
        checkAll: menuCodes.length === allMenus.length,
        isIndeterminate: menuCodes.length > 0 && menuCodes.length < allMenus.length
      }
    })
  }
}
/**提交表单 */
const submit = async () => {
  // 获取所有选中的菜单
  // 获取所有选中的菜单
  const data = [] as MenuVO[];
  form.value.forEach(x => {
    const list = menuList.value.filter(m => x.menuCodes.some(n => n === m.menuCode));
    data.push(...list);
  })
  const { success, msg } = await ApiTree.auth.updateMenuAuth(props.role, props.roleName, data);
  if (success) {
    ElMessage.success(msg);
  }
  emits("close");
}
/** 监听状态 */
watch(() => props.visible, async () => {
  if (props.visible) {
    await getMenuList();
    await getRoleAuth();
  }
}, { immediate: true })
</script>
<style lang="scss" scope></style>
